import { PlusOutlined } from '@ant-design/icons';
import { Button, Popconfirm, Space, Switch, Table, Form, Input, Select, Col } from 'antd';
import type { ColumnsType } from 'antd/es/table';
// import dayjs from 'dayjs';
import { useModel } from 'umi';

import hooks from '../../hooks';
import RoleGroupDrawer from '../RoleGroupDrawer';
import { SearchForm } from '@szzj/ds';
import type { IRoleList } from '@/types/systemManagement/role';
import { ERoleStatus } from '@/types/systemManagement/role';
/**
 * 角色状态
 */
export const ERoleStatusOptions = [
  {
    label: '启用',
    reversedLabel: '禁用',
    value: ERoleStatus.ENABLED,
  },
  {
    label: '禁用',
    reversedLabel: '启用',
    value: ERoleStatus.DISABLED,
  },
];

function SearchTable() {
  const {
    tableHooks: { tableProps, search },
    form,
    updateRoleStatus,
    editHooks,
    deleteRole,
  } = hooks.useContainer();

  const { hasPermisson } = useModel('useUser', (model) => {
    return {
      hasPermisson: model.getRole,
    };
  });

  const columns: ColumnsType<IRoleList> = [
    {
      title: '角色名称',
      width: 120,
      dataIndex: 'name',
    },
    // {
    //   title: '人数',
    //   width: 100,
    //   dataIndex: 'userNum',
    // },
    {
      title: '角色描述',
      width: 160,
      dataIndex: 'description',
    },
    {
      title: '创建时间',
      width: 160,
      dataIndex: 'createTime',
      // render: (value) => dayjs(value).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '角色状态',
      width: 100,
      dataIndex: 'status',
      render: (value, row) => {
        const found = ERoleStatusOptions.find((it) => it.value === value);
        return (
          row.name !== 'admin'
          // && hasPermisson('CHANGE_ROLE_STATUS') || hasPermisson('BTN_ROLE_STATUS_CHANGE')
        ) ? (
          <Popconfirm
            title={`确定${found?.reversedLabel}该角色吗?`}
            onConfirm={() => {
              updateRoleStatus.run({
                id: row.id,
                status: value === ERoleStatus.ENABLED ? ERoleStatus.DISABLED : ERoleStatus.ENABLED
              });
            }}
          >
            <Switch
              checked={value === ERoleStatus.ENABLED}
              checkedChildren="启用"
              unCheckedChildren="禁用"
            />
          </Popconfirm>
        ) : (
          <Switch
            checked={value === ERoleStatus.ENABLED}
            disabled
            checkedChildren="启用"
            unCheckedChildren="禁用"
          />
        );
      },
    },
    {
      title: '操作',
      width: 140,
      fixed: 'right',
      render: (row) => {
        return (
          <Space>
            <Button
              type="link"
              // disabled={
              //   row.status === ERoleStatus.DISABLED
              //   // ||(!hasPermisson('UPDATE_ROLE') && !hasPermisson('BTN_ROLE_UPDATE'))
              // }
              onClick={() => editHooks.onOpen(row, 'edit')}
              style={{ padding: 0 }}
            >
              编辑
            </Button>
            <Button
              type="link"
              onClick={() => editHooks.onOpen(row, 'detail')}
              style={{ padding: 0 }}
            >
              详情
            </Button>
            <Popconfirm
              title="删除后不可恢复，是否确认删除？"
              onConfirm={() => deleteRole.run(row.id)}
            // disabled={
            //  (!hasPermisson('DELETE_ROLE') && !hasPermisson('BTN_ROLE_DELETE'))
            // }
            >
              <Button
                type="link"
                danger
                style={{ padding: 0 }}
                disabled={
                  row.name === 'admin' ||
                  row.status === ERoleStatus.ENABLED
                  // || (!hasPermisson('DELETE_ROLE') && !hasPermisson('BTN_ROLE_DELETE'))
                }
              >
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    <>
      <SearchForm
        form={form}
        onFinish={search.submit}
      >
        <Col span={8}>
          <Form.Item name="name" label="角色名称" >
            <Input placeholder="请输入"></Input>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="角色状态" name="status" >
            <Select options={ERoleStatusOptions} allowClear placeholder="请选择">
            </Select>
          </Form.Item>
        </Col>
      </SearchForm>
      <Button
        style={{ margin: '20px 0' }}
        // disabled={!hasPermisson('ADD_ROLE') && !hasPermisson('BTN_ROLE_CREATE')}
        icon={<PlusOutlined />}
        type="primary"
        onClick={() => editHooks.onOpen(null, 'add')}
      >
        新增角色
      </Button>
      <Table rowKey="id" columns={columns} scroll={{ x: 660 }} {...tableProps} />
      {/* <RoleGroupDrawer {...roleGroupModal.props} /> */}
    </>
  );
}

export default SearchTable;
